
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
import VectorSource from 'ol/source/Vector';
import {Icon, Style} from 'ol/style';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
import {fromLonLat, fromUserCoordinate} from 'ol/proj';

import {Modify} from 'ol/interaction';

const rome = new Feature({
  geometry: new Point(fromUserCoordinate([12127398.797692968, 4063894.123105166])),
});

// const london = new Feature({
//   geometry: new Point(fromLonLat([-0.12755, 51.507222])),
// });

// const madrid = new Feature({
//   geometry: new Point(fromLonLat([-3.683333, 40.4])),
// });
// const paris = new Feature({
//   geometry: new Point(fromLonLat([2.353, 48.8566])),
// });
// const berlin = new Feature({
//   geometry: new Point(fromLonLat([13.3884, 52.5169])),
// });


rome.setStyle(
  new Style({
    image: new Icon({
      color: '#BADA55',
      crossOrigin: 'anonymous',
      // For Internet Explorer 11
      // imgSize: [80, 80],
      // src: 'data/square.svg',
      src: 'static/icons/log.png'
    }),
  })
);

// 修改坐标
rome.setGeometry(new Point(fromUserCoordinate([12127398.797692968, 4068994.123105166])));

// london.setStyle(
//   new Style({
//     image: new Icon({
//       color: 'rgba(255, 0, 0, .5)',
//       crossOrigin: 'anonymous',
//       src: 'data/bigdot.png',
//       scale: 0.2,
//     }),
//   })
// );

// madrid.setStyle(
//   new Style({
//     image: new Icon({
//       crossOrigin: 'anonymous',
//       src: 'data/bigdot.png',
//       scale: 0.2,
//     }),
//   })
// );

// paris.setStyle(
//   new Style({
//     image: new Icon({
//       color: '#8959A8',
//       crossOrigin: 'anonymous',
//       // For Internet Explorer 11
//       imgSize: [20, 20],
//       src: 'data/dot.svg',
//     }),
//   })
// );

// berlin.setStyle(
//   new Style({
//     image: new Icon({
//       crossOrigin: 'anonymous',
//       // For Internet Explorer 11
//       imgSize: [20, 20],
//       src: 'data/dot.svg',
//     }),
//   })
// );


const iconFeature = new Feature({
  geometry: new Point([12137398.797692968, 4068994.123105166]),
  name: 'Null Island',
  population: 4000,
  rainfall: 500,
});

const iconStyle = new Style({
  image: new Icon({
    anchor: [0.5, 46],
    anchorXUnits: 'fraction',
    anchorYUnits: 'pixels',
    src: 'static/icons/log.png',
  }),
});

iconFeature.setStyle(iconStyle);

const vectorSource = new VectorSource({
  features: [iconFeature],
});

const vectorLayer = new VectorLayer({
  source: vectorSource,
});

function getDrawIconVectorLayer() {
  return vectorLayer;
}

function initModifyVectorLayer(map) {

  const target = document.getElementById('map');
  console.log('********* target ', target)
  const modify = new Modify({
    hitDetection: vectorLayer,
    source: vectorSource,
  });
  modify.on(['modifystart', 'modifyend'], function (evt) {
    target.style.cursor = evt.type === 'modifystart' ? 'grabbing' : 'pointer';
  });
  const overlaySource = modify.getOverlay().getSource();
  overlaySource.on(['addfeature', 'removefeature'], function (evt) {
    target.style.cursor = evt.type === 'addfeature' ? 'pointer' : '';
  });

  map.addInteraction(modify);

}

export {
  getDrawIconVectorLayer as getIconVectorLayer,
  initModifyVectorLayer as initModifyIconVectorLayer
}

